<template>
  <div ref="congestionChart" class="congestionChart" />
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'CongestionChart',
  props: {
    rateDatas: {
      type: Object,
      default: () => Object
    }
  },
  data () {
    return {
      charts: '',
      opinion: [],
      opinionData: [],
      count: 0,
      timer: '',
      normalColor: '#94a1a9',
      fontSize: 15,
      datas: {
        xData: [
          '00:00',
          '2:00',
          '4:00',
          '6:00',
          '8:00',
          '10:00',
          '12:00',
          '14:00',
          '16:00',
          '18:00',
          '20:00',
          '22:00'
        ],
        yData1: [

        ],
        yData2: [

        ],
        areaColor1: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: 'rgba(35, 63, 181, 1)'
            },
            {
              offset: 0.8,
              color: 'rgba(2, 89, 120, 0.5)'
            }
          ],
          false
        ),
        areaColor2: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: 'rgba(95, 194, 114, 1)'
            },
            {
              offset: 0.8,
              color: 'rgba(14, 108, 111, 0.5)'
            }
          ],
          false
        ),
        lineColor1: 'rgb(59, 194, 244)',
        lineColor2: 'rgb(107, 239, 150)'
      }
    }
  },
  watch: {
    rateDatas (newV, oldV) {
      this.initData(newV)
    }
  },
  // 调用
  mounted () {
    // console.log(this.rateDatas)
    // this.initData(this.rateDatas)
  },
  /*  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  }, */
  methods: {
    initData (result) {
      if (result) {
        this.datas.yData1 = result.today
        this.datas.yData2 = result.lastWeek
      }
      this.drawPie(this.datas.yData1, this.datas.yData2)
    },
    drawPie (y1, y2) {
      this.charts = echarts.init(this.$refs.congestionChart)

      this.charts.setOption({
        title: {
          text: '拥堵指数',
          x: 10,
          y: 10,
          textStyle: {
            // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            fontWeight: 'bolder',
            fontSize: 20,
            fontStyle: 'italic',
            color: '#fff',

          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          itemWidth: 25,
          itemHeight: 8,
          itemGap: 15,
          x: 100, // 设置在X周上偏移的位置
          top: 10,
          data: ['今日', '上周'],
          textStyle: {
            fontSize: this.fontSize,
            color: '#fff'
          }
        },
        grid: {
          left: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: this.normalColor
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: this.normalColor
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: this.fontSize
              }
            },
            data: this.datas.xData
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: this.normalColor
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: this.fontSize
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: this.normalColor
              }
            }
          }
        ],
        series: [
          {
            name: '今日',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: this.datas.areaColor2,
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: this.datas.lineColor2,
                borderColor: 'rgba(137,189,2,0.27)',
                borderWidth: 12
              }
            },
            data: y1
          },
          {
            name: '上周',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: this.datas.areaColor1,
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: this.datas.lineColor1,
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12
              }
            },
            data: y2
          }
        ]
      })
      window.addEventListener('resize', () => {
        this.charts.resize()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.congestionChart {
  width: 100%;
  height: 410px;
  margin-top: 10px;
  margin-left: 10px;
}
</style>
